import React, { Component } from 'react'
import styles from './ActiveBook.module.scss'
import {withRouter} from 'react-router-dom'

class ActiveBook extends Component {
  state = {
    activeBookList: []
  }
  componentDidMount(){
    this.setState({
      activeBookList:this.props.activeBookList
    })
  }

  handleClick = () => {
    let arr = this.props.activeBookList.templateList
    arr.sort(randomSort);
    function randomSort(a, b) { return Math.random() > 0.5 ? -1 : 1; }
    this.setState({
      activeBookList:arr
    })
  }
  handleChange=(id) => {
    this.props.history.push('detailed/'+id)
  }
  

  render() {
    return (
      <div className={styles.activebook}>
        <div className={styles.title}>
          <div>{this.props.title}</div>
          <span onClick={this.handleClick}>换一换</span>
        </div>
        <div className={styles.items}>
          {this.props.activeBookList && (this.props.activeBookList.templateList||this.props.activeBookList).map((v, i) => {
            if (i < 3) {
              return <div key={i} className={styles.item}>
                <img onClick={this.handleChange.bind(this,v.id)} src={v.imgUrl} alt="" />
                <div className={styles.item_left}>
                  <h3>{v.name} </h3>
                  <p> {v.content} </p>
                  <div className={styles.ext}>
                    <p>{v.authorName}</p>
                    <span> {v.name.slice(0, 2)} </span>
                  </div>
                </div>
              </div>
            }
          })}
        </div>
      </div>
    )
  }
}
export default withRouter(ActiveBook);
